<template>
  <view class="map-container">
    <view class="back-button" @click="goBack">
      <text class="back-text">返回</text>
    </view>
    <map
      id="map"
      class="map"
      :latitude="22.678821"
      :longitude="110.196167"
      :scale="15"
      :show-location="false"
      :enable-3D="true"
      :enable-building="true"
      :enable-rotate="false"
      :enable-scroll="true"
      :enable-zoom="true"
      :markers="markers"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      markers: [{
        id: 1,
        latitude: 22.678821,
        longitude: 110.196167,
        title: '玉林师范学院东校区',
        width: 30,
        height: 30,
        callout: {
          content: '玉林师范学院东校区',
          color: '#000000',
          fontSize: 14,
          borderRadius: 4,
          padding: 5,
          display: 'ALWAYS',
          textAlign: 'center'
        }
      }]
    };
  },
  methods: {
    goBack() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 100vh;
  position: relative;
  
  .map {
    width: 100%;
    height: 100%;
  }

  .back-button {
    position: fixed;
    top: 100rpx;
    left: 20rpx;
    background-color: #ffffff;
    padding: 15rpx 30rpx;
    border-radius: 30rpx;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 999;
    
    .back-text {
      font-size: 28rpx;
      color: #333333;
    }
  }
}
</style> 